<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
  <div>

    <div ng-include="headerInclude"></div>
    <div ng-controller="Apiman.DashController" class="page container-pf-nav-pf-vertical container-fluid" data-field="page" ng-cloak="" ng-show="pageState == 'loaded'">
      <div class="row">
        <div class="col-md-12">
          <h1 apiman-i18n-key="dash.page-heading">API Management</h1>
          <hr />
        </div>
        <div class="col-md-12 no-phone">
          <span class="description" apiman-i18n-key="dash.page-description">
            Welcome to Apiman, open source API management.  Use this software to provide
            various APIs (APIs) to your consumers (Client Apps) through a secure, scalable,
            and governed Gateway layer.  API Management allows API Developers to centralize
            control and analysis of their APIs.  It also provides a central location for
            Client App Developers to find and consume available APIs.
          </span>

        </div>
      </div>
      <div class="row">
        <div class="col-md-12" id="dash-container">

          <div class="dash-group" id="apiman-dash-orgs">
            <div class="title">
              <i class="fa fa-shield"></i>
              <span apiman-i18n-key="organizations">Organizations</span>
            </div>
            <div class="description" apiman-i18n-key="dash.orgs-description">
              All APIs and Client Apps must be managed within the context of an
              Organization.  You can be a member of multiple Organizations at the same
              time, with different roles in each:  you can be a Client App
              Developer in one organization and an API Developer in another.
            </div>
            <div class="actions">
              <ul>
                <li ng-hide="noCreateOrg"><a id="apiman-dash-orgs-new" href="{{ pluginName }}/new-org" apiman-i18n-key="actions.create-new-org" data-field="createOrg">Create a New Organization</a></li>
                <li><a id="apiman-dash-orgs-my-orgs" href="{{ pluginName }}/users/{{ currentUser.username }}/orgs" apiman-i18n-key="actions.my-orgs" data-field="myOrgs">Go to My Organizations</a></li>
                <li><a id="apiman-dash-orgs-browse" href="{{ pluginName }}/browse/orgs?q=*&cp=1&ps=12" apiman-i18n-key="actions.browse-orgs" data-field="browseOrgs">Browse/Find an Organization</a></li>
              </ul>
            </div>
          </div>

          <div class="dash-group pull-right" id="apiman-dash-apis">
            <div class="title">
              <i class="fa fa-puzzle-piece"></i>
              <span apiman-i18n-key="apis">APIs</span>
            </div>
            <div class="description" apiman-i18n-key="dash.apis-description">
              Create, find, or manage APIs.  An API is also known as a "Service" - anything
              that can be invoked remotely by some sort of client application.  This platform
              simply provides a way to turn unmanaged (raw) back-end APIs into "managed" APIs
              by attaching policies to them.
            </div>
            <div class="actions">
              <ul>
                <li><a id="apiman-dash-apis-manage" href="{{ pluginName }}/users/{{ currentUser.username }}/apis" apiman-i18n-key="actions.my-apis">Manage My APIs</a></li>
                <li><a id="apiman-dash-apis-new" href="{{ pluginName }}/new-api" apiman-i18n-key="actions.create-api">Create a New API</a></li>
                <li><a id="apiman-dash-apis-catalog" href="{{ pluginName }}/catalog/api-catalog" apiman-i18n-key="actions.browse-importable-apis">Browse available/importable APIs</a></li>
              </ul>
            </div>
          </div>

          <div class="dash-group" id="apiman-dash-clients">
            <div class="title">
              <i class="fa fa-gears"></i>
              <span apiman-i18n-key="clients">Client Apps</span>
            </div>
            <div class="description" apiman-i18n-key="dash.clients-description">
              Create and manage your Client Apps.  A Client App is the thing that consumes
              APIs.  These consumers must be defined in this platform so that
              contracts can be created between them and the APIs they wish to consume.
            </div>
            <div class="actions">
              <ul>
                <li><a id="apiman-dash-clients-manage" href="{{ pluginName }}/users/{{ currentUser.username }}/clients" apiman-i18n-key="actions.my-clients" data-field="myClients">Manage My Client Apps</a></li>
                <li><a id="apiman-dash-clients-new" href="{{ pluginName }}/new-client" apiman-i18n-key="actions.new-client" data-field="createClient">Create a New Client App</a></li>
                <li><a id="apiman-dash-apis-consume" href="{{ pluginName }}/browse/apis?q=*&cp=1&ps=12" apiman-i18n-key="actions.find-api">Find/Consume an API</a></li>
              </ul>
            </div>
          </div>

          <div class="dash-group dash-admin-group pull-right" id="apiman-dash-admin" data-field="adminDashPanel" ng-show="isAdmin">
            <div class="title">
              <i class="fa fa-gavel"></i>
              <span apiman-i18n-key="system-administration">System Administration</span>
            </div>
            <div class="description" apiman-i18n-key="dash.system-description">
              Hey it looks like you're an administrator!  Here are some things only you can do.
              These are system-wide settings you're thinking about modifying, so please proceed
              with caution.
            </div>
            <div class="actions">
              <ul>
                <li><a id="apiman-dash-admin-roles" href="{{ pluginName }}/admin/roles" apiman-i18n-key="actions.manage-roles" data-field="manageRoles">Manage Roles/Permissions</a></li>
                <li><a id="apiman-dash-admin-policyDefs" href="{{ pluginName }}/admin/policyDefs" apiman-i18n-key="actions.manage-policyDefs" data-field="managePolicyDefs">Manage Policy Definitions</a></li>
                <li><a id="apiman-dash-admin-gateways" href="{{ pluginName }}/admin/gateways" apiman-i18n-key="actions.manage-gateways" data-field="manageGateways">Manage Gateways</a></li>
                <li><a id="apiman-dash-admin-plugins" href="{{ pluginName }}/admin/plugins" apiman-i18n-key="actions.manage-plugins" data-field="managePlugins">Manage Plugins</a></li>
                <li><a id="apiman-dash-admin-export" href="{{ pluginName }}/admin/export" apiman-i18n-key="export-import-data">Export/Import Data</a></li>
              </ul>
            </div>
          </div>

<!--          <div class="dash-group">-->
<!--            <div class="title">-->
<!--              <i class="fa fa-code-fork"></i>-->
<!--              <span apiman-i18n-key="notifications">Notifications</span>-->
<!--            </div>-->
<!--            <div class="description" apiman-i18n-key="dash.devportal-description">-->
<!--              Manage your notifications, including approving requests by developers to sign up to APIs.-->
<!--            </div>-->
<!--            <div class="actions">-->
<!--              <ul>-->
<!--                <li>Developer account approvals</li>-->
<!--                <li><a href="">API Signup Approval Requests</a></li>-->
<!--                <li>Manage notifications</li>-->
<!--              </ul>-->
<!--            </div>-->
<!--          </div>-->

        </div>
      </div>
    </div> <!-- /container -->
  </div>
  </body>
</html>
